<template>
  <div>
    <headNav title=""></headNav>
    <div class="headCss flexCenter" >
      <div class="headImgCss" >
        <img v-if="informationData.portraitImgUrl" :src="informationData.portraitImgUrl" mode="" class="imgSize" >
        <img  v-if="!informationData.portraitImgUrl" src="@/assets/img/sos/dad.png" mode="" class="imgSize" >
      </div>
      <div class="flexColumn nameDivCss" >
        <span>{{informationData.name}}</span>
        <span>{{informationData.gradeName}}{{informationData.className}}</span>
      </div>
    </div>
    <div class="bottomDivCss" >
      <!-- <div class="flexJustify transverseCss" >
        <div>
          <span>备注名：小陈</span>
        </div>
        <div>
          <span @click="$router.push({name: 'parentPage', params: {key: '修改备注'}})" >编辑 ></span>
        </div>
      </div> -->
      <div class="flexJustify transverseCss" style="height: 1.2rem;" >
        <div class="flexAlign"  >
          <span>人脸样本：</span>
          <div class="faceCss" >
            <img v-if="informationData.faceImgUrl" :src="informationData.faceImgUrl" alt="" class="imgSize" >
            <img v-if="!informationData.faceImgUrl" src="@/assets/img/default_head.png" alt="" class="imgSize" >
          </div>
        </div>
        <div>
          <span  @click="routerClick('人脸样本', '')" >编辑 ></span>
        </div>
      </div>
      <div class="flexJustify transverseCss" >
        <div>
          <span v-if="informationData.contactPhoneNum" @click="phoneClick(informationData.contactPhoneNum)" >学生卡电话：{{informationData.contactPhoneNum}}</span>
          <span v-else >学生卡电话：未绑定</span>
        </div>
      </div>
      <div class="flexJustify transverseCss" >
        <div>
          <span>家长信息：</span>
        </div>
        <div>
          <span @click="routerClick('添加家长', '')" >添加 ></span>
        </div>
      </div>

      <div class="dropDownCss" >
        <div class="flex dropDownDiv" 
        v-for="(val, index) in informationData.parentList" :key="index" >
          <div class="flexCenter nameCss" >
            <span>{{val.name}}</span>
          </div>
          <span v-for="(i, j) in dictionariesData" :key="j"
          v-if="i.valCode == val.relationCode" >
          {{i.valName}}</span>
          <span @click="phoneClick(val.phone)" >{{val.phone}}</span>
          <span @click="deleteClick(val)" >删除</span>
          <span  @click="routerClick('编辑家长', val)"  >编辑 ></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getStudentApi, getDictionariesApi, getPhoneApi, postTparentApi } from '@/api/studentDetailsApi.js'
import { Confirm } from 'vux'
export default {
  components: {
    headNav,
    Confirm
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      schoolId: state => state.user.schoolId
    })
  },
  data () {
    return {
      informationData: '',
      dictionariesData: ''
    }
  },
  methods: {
    // 删除家长按钮触发事件
    async deleteClick (e) {
      this.$vux.confirm.show({
          title: '提示',
          content: '是否确定删除该家长？',
          onConfirm : () => {
            for (let i = 0; i < this.informationData.parentList.length; i++) {
              if (this.informationData.parentList[i].id == e.id) {
                this.informationData.parentList.splice(i, 1)
              }
            }
            this.parentDress(this.informationData.parentList)
          },
          onCancel () {
          }
      })
      

    },
    // 点击电话号码拨打
    phoneClick (e) {
      window.location.href = 'tel://' + e
    },
    // 点击处理功能跳转事件
    routerClick (e, val) {
      localStorage.routerData = e
      this.$router.push('parentPage')
      // console.log(val)
      if (e == '添加家长') {
        localStorage.relativeArr = ''
      }
      if (e == '编辑家长') {
        localStorage.relativeArr = JSON.stringify(val)
      }
      if (e == '人脸样本') {
        localStorage.relativeArr = ''
      }
    },
    // 获取学生信息封装
    async singleMessage () {
      let params = {
        studentIds: JSON.parse(localStorage.detailsId).studentId
      }
      let res = await getStudentApi(params)
      if (res.length > 0 ) {
        this.informationData = res[0]
        localStorage.headInformation = JSON.stringify(res[0])
        res[0].parentList.length > 0 ? localStorage.personalData = JSON.stringify(res[0].parentList) : localStorage.personalData = ''
      }

      let val = {
        StudentId: JSON.parse(localStorage.detailsId).studentId
      }
      let value = await getPhoneApi(val)
      this.informationData.contactPhoneNum = value.data.phone
    },
    // 删除家长请求封装
    async parentDress (list) {
      let params = {
        id: JSON.parse(localStorage.detailsId).studentId,
        data: list
      }
      await postTparentApi(params)
      this.singleMessage()
      this.$vux.toast.text('操作成功', 'middle')
    },
    // 获取家长字典枚举封装
    async dictionaries () {
      let params = {
        typeCode: 'FamilyRelation'
      }
      let res = await getDictionariesApi(params)
      this.dictionariesData = res
      console.log(res)
    }
  },
  async mounted() {
    this.singleMessage()
    this.dictionaries()
  },
}
</script>

<style scoped lang="less" >
.faceCss {
  width: 1rem;
  height: 1rem;
  margin-left: 0.05rem;
  border-radius: 0.2rem;
}

.nameCss {
  width: 1rem;
  height: 0.8rem;
  overflow-x: hidden;
}

.dropDownDiv {
  width: 6.38rem;
  height: 0.8rem;
  margin: 0 0 0.3rem 0.2rem;
  background: #f5f5f5;
}

.dropDownCss {
  width: 100%;
  height: 4.8rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

 .transverseCss :nth-child(1) {
   margin-left: 0.2rem;
}

 .transverseCss :nth-child(2) {
   margin-right: 0.3rem;
}

.headImgCss {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 5rem;
  margin: 0 0 1.2rem -2.5rem;
}

.transverseCss {
  width: 100%;
  height: 0.8rem;
  margin-top: 0.2rem;
}

.bottomDivCss {
  width: 6.8rem;
  height: 9.3rem;
  background: #FFF;
  border-radius: 0.15rem;
  position: absolute;
  top: 2.7rem;
  left: 0.2rem;
  font-size: 0.28rem;
}

.nameDivCss {
  margin-left: 0.3rem;
  font-size: 0.35rem;
  color: #FFF;
  margin: 0 0 1.2rem 0.3rem;
}

.headCss {
  width: 7.2rem;
  height: 3rem;
  background-image: url('../../assets/img/bo.png');
  background-size:100% 100%;
}

.imgSize {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexColumn {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexJustify {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
